<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="住院预交"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<inBox v-if="inHospital.ZYH" :inHospital="inHospital"></inBox>
			<view v-if="inHospital.ZYH" class="tn-margin-top-sm">
				<view class="dawn-wrap tn-width-full tn-margin-top-xs tn-flex tn-flex-wrap">
					<view v-for="(item,index) in moneyList" :key="index" @click="chooseMoney(item)">
						<view class="dawn-check-box" style="padding: 10px 15px;white-space: normal;text-align:left;"
							:class="item.value === createOrderData.amount?'dawn-check-box__select':''">
							<view class="dawn-text-sm">
								{{ item.label }}
							</view>
							<view v-if="item.value === createOrderData.amount" class="dawn-check-box__select--icon"
								style="font-size: 13px;">
								<view class="tn-icon-success-square-fill"></view>
							</view>
						</view>
					</view>

					<view class="tn-margin-top tn-width-full tn-bg-gray--light"
						style="border-radius: 10rpx;padding: 20rpx 30rpx;">
						<!-- <text class="tn-flex tn-text-lg tn-padding-right-xs tn-color-gray--dark">￥</text> -->
						<view class="dawn-input-text" @click="openKeyboard('number')">
							<text class="dawn-color-grey">￥</text>
							<text v-if="createOrderData.amount"
								class="tn-text-bold dawn-text-lg">{{ createOrderData.amount }}</text>
							<text v-else class="dawn-color-grey">请输入充值金额</text>
						</view>
					</view>
				</view>


				<!-- 悬浮按钮-->
				<view class="tn-flex tn-footerfixed">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button @click="createOrder()" class="dawn-btn-lg dawn-btn-lg__pay">
							<text class="tn-icon-money-fill tn-padding-right-xs"></text>
							<text>确认充值</text>
						</tn-button>
					</view>
				</view>
			</view>
			<view v-if="show">
				<dawnMsg :box="dawnMsgBox" :msg="msg"></dawnMsg>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>


		<!-- 键盘 -->
		<tn-keyboard v-model="showKeyboard" :mode="mode" :randomEnabled="false" :switchEnMode="true" :tooltip="true"
			:mask="true" @change="onKeyboardChange" @cancel="onKeyboardCancel" @confirm="onKeyboardConfirm"
			@backspace="onBackspace"></tn-keyboard>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as InhospitalApi from "@/api/hospital/inhospital.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				loading: false,
				show: false,
				msg: '',
				dawnMsgBox: '',
				mode: 'number',
				showKeyboard: false,
				queryData: {
					pageSize: 10,
					pageNo: 1,
					patientId: '',
					patientName: '',
					inPatientId: '',
					inPatientNo: ''
				},
				moneyList: [{
					label: '200 元',
					value: '200'
				}, {
					label: '500 元',
					value: '500'
				}, {
					label: '800 元',
					value: '800'
				}, {
					label: '1000 元',
					value: '1000'
				}, {
					label: '2000 元',
					value: '2000'
				}, {
					label: '3000 元',
					value: '3000'
				}],
				createOrderData: {
					amount: ''
				},
				inHospital: {},
				feeList: [],
				zdList: [],
				ssList: [],
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.info("query onLoad")
			if (!this.isLogin) {
				this.loading = true;
				toLogin();
				return;
			} else {
				this.queryData.inPatientId = options.inPatientId;
				this.queryData.inPatientNo = options.inPatientNo;
				this.getData();
			}
		},
		methods: {
			getData: function(page) {
				if (!this.patientInfo.id) {
					this.show = true;
					this.msg = '请先添加就诊人！';
					return;
				}
				let that = this;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = '';
				this.queryData.patientName = this.patientInfo.name;
				this.queryData.patientId = this.patientInfo.patientId;
				if(this.patientInfo.patientId === '35426'){
					this.queryData.patientId = '674323';
				}
				InhospitalApi.getInhospital(this.queryData).then(res => {
					this.loading = false;
					console.table(res);
					if (res.code === 0) {
						if (res.data.inHospital) {
							that.inHospital = res.data.inHospital;
							that.feeList = res.data.feeList;
							that.zdList = res.data.zdList;
							that.ssList = res.data.ssList;
						} else {
							this.show = true;
							this.msg = '未查询到在院数据';
						}
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			createOrder: function() {

				if (!this.createOrderData.amount) {
					return this.$util.Tips({
						title: '请输入充值金额'
					});
				}

				let that = this;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = 'popup';

				this.createOrderData.pid = this.patientInfo.id;
				this.createOrderData.userId = this.patientInfo.openid;
				this.createOrderData.openid = this.patientInfo.openid;
				this.createOrderData.patientId = this.patientInfo.patientId;
				this.createOrderData.clinicNo = this.patientInfo.clinicNo;
				this.createOrderData.patientName = this.patientInfo.name;
				this.createOrderData.cardNo = this.patientInfo.cardNo;
				this.createOrderData.address = this.patientInfo.address;
				
				this.createOrderData.inPatientId = this.queryData.inPatientId;
				this.createOrderData.orderName = '住院预交';
				this.createOrderData.payType = '';
				
				this.createOrderData.sex = this.inHospital.XB;
				this.createOrderData.inPatientNo = this.inHospital.ZYH;
				this.createOrderData.inDate = this.inHospital.RYSJ;
				this.createOrderData.bedNo = this.inHospital.CDH;
				this.createOrderData.departmentId = this.inHospital.KSID;
				this.createOrderData.departmentName = this.inHospital.ZYKS;
				this.createOrderData.doctorName = this.inHospital.ZZYS;
				
				this.createOrderData.totalCost = this.inHospital.totalCost || '';
				this.createOrderData.paycost = this.inHospital.paycost || '';
				this.createOrderData.prePayBalance = this.inHospital.prePayBalance || '';
				this.createOrderData.inBalance = this.inHospital.inBalance || '';
				
				InhospitalApi.createPreOrder(this.createOrderData).then(res => {
					console.table(res);
					this.loading = false;
					if (res.code === 0) {
						// uni.navigateTo({
						// 	url: '/hosp/order/info?orderNumber=' + res.data.orderNumber
						// })
						that.toPayUI(res.data.orderNumber);
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			chooseMoney(item) {
				console.table(item);
				this.createOrderData.amount = item.value;
			},
			// 弹出键盘
			openKeyboard(type) {
				this.mode = type;
				this.showKeyboard = true;
			},
			// 键盘输入值改变
			onKeyboardChange(e) {
				if (this.mode === 'number') {
					this.createOrderData.amount += e
				} else if (this.mode === 'card') {

				}
			},
			// 点击了取消按钮
			onKeyboardCancel() {
				this.showKeyboard = false
				if (this.mode === 'number') {
					// this.formData.age = '';
				} else if (this.mode === 'card') {

				}
			},
			// 点击了确认按钮
			onKeyboardConfirm() {
				this.showKeyboard = false
			},
			// 点击了退格按钮
			onBackspace() {
				if (this.mode === 'number') {
					if (!this.createOrderData.amount) {
						return
					}
					this.createOrderData.amount = this.createOrderData.amount.substring(0, this.createOrderData.amount
						.length - 1);
				} else if (this.mode === 'card') {

				}
			},
			navDteail(item) {
				uni.navigateTo({
					url: '/hosp/outpatient/unpay_recipe?registerNo=' + item.NO
				})
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/

	/* 选择*/
	.tag-select {
		color: #07C160;
		border: 1rpx solid #07C160;
		background-color: #07C16010;
		border-radius: 16rpx;
	}

	.tag-select-no {
		color: #080808;
		border: 1rpx solid #E6E6E6;
		background-color: #F9F9F9;
		border-radius: 16rpx;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 20rpx 42rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/
</style>